<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="报单管理" name="first">
        <el-table
          v-loading="listBillLoading"
          border
          default-expand-all
          row-key="id"
          size="mini"
          :data="listBill"
          max-height="500px"
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="时间" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.real_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="收款卡" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.card_id }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="银行卡管理" name="second">
        <div class="filter-container">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="dialogCardAddVisible = true"
          >
            添加
          </el-button>
        </div>
        <el-table
          v-loading="listCardLoading"
          border
          default-expand-all
          row-key="id"
          size="mini"
          :data="listCard"
          max-height="500px"
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="卡号" prop="id" min-width="20%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" min-width="15%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.real_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电报群" min-width="20%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.telegram_group_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="20%" align="center">
            <template slot-scope="{row}">
              <span v-if="row.status === 2" style="color:#37B328">{{ row.status === -1 ? "禁用" :row.status === 0 ? "未绑定" : row.status === 1 ? "离线" : "在线" }}</span>
              <span v-else-if="row.status === 1" style="color:#F56C6C">{{ row.status === -1 ? "禁用" :row.status === 0 ? "未绑定" : row.status === 1 ? "离线" : "在线" }}</span>
              <span v-else style="color:#909399">{{ row.status === -1 ? "禁用" :row.status === 0 ? "未绑定" : row.status === 1 ? "离线" : "在线" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="20%" align="center">
            <template slot-scope="{row}">
              <template v-if="row.status == -1">
                <el-button disabled type="warning" size="mini" @click="unbindCard(row)">
                  解绑
                </el-button>
              </template>
              <template v-else>
                <el-button type="warning" size="mini" @click="unbindCard(row)">
                  解绑
                </el-button>
              </template>
              <template v-if="row.status == -1">
                <el-button disabled type="danger" size="mini" @click="disableCard(row)">
                  禁用
                </el-button>
              </template>
              <template v-else>
                <el-button type="danger" size="mini" @click="disableCard(row)">
                  禁用
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="电报群管理" name="third">
        <div class="filter-container">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            @click="dialogGroupAddVisible = true"
          >
            添加
          </el-button>
        </div>
        <el-table
          v-loading="listGroupLoading"
          border
          default-expand-all
          row-key="id"
          size="mini"
          :data="groupList"
          max-height="500px"
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="群ID" prop="id" min-width="20%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="群名" min-width="20%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.group_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="30%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.group_comment }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="10%" align="center">
            <template slot-scope="{row}">
              <el-button type="danger" size="mini" @click="confirmGroupDelete(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogCardAddVisible" title="添加卡信息" @close="handleDialogCardAddClose">
      <el-form ref="formCardAdd" :model="formCardAdd" :rules="formGroupAddRules" label-width="80px">
        <el-form-item label="卡号" prop="id">
          <el-input v-model="formCardAdd.id" placeholder="请输入卡号" />
        </el-form-item>
        <el-form-item label="持卡人名" prop="real_name">
          <el-input v-model="formCardAdd.real_name" placeholder="请输入持卡人名" />
        </el-form-item>
        <el-form-item label="电报群">
          <el-select v-model="formCardAdd.telegram_group_id" placeholder="请选择电报群" style="width:300px">
            <el-option
              v-for="item in selectGroups"
              :key="item.id"
              :label="item.group_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCardAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCardFormAdd">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogGroupAddVisible" title="添加电报群" @close="handleDialogGroupAddClose">
      <el-form ref="formGroupAdd" :model="formGroupAdd" :rules="formGroupAddRules" label-width="80px">
        <el-form-item label="群ID" prop="id">
          <el-input v-model="formGroupAdd.id" placeholder="请输入群ID" />
        </el-form-item>
        <el-form-item label="群名" prop="name">
          <el-input v-model="formGroupAdd.name" placeholder="请输入群名" />
        </el-form-item>
        <el-form-item label="群描述" prop="comment">
          <el-input v-model="formGroupAdd.comment" placeholder="请输入群描述" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogGroupAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGroupFormAdd">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import Pagination from '@/components/Pagination'
import { listBill, addGroup, deleteGroup, listGroup, listCard, addCard, unbindCard, disableCard, getOnlineCard } from '@/api/bot'
import { Message } from 'element-ui'
export default {
  name: 'Bot',
  data() {
    return {
      dialogGroupAddVisible: false,
      dialogCardAddVisible: false,
      listGroupLoading: false,
      listCardLoading: false,
      listBillLoading: false,
      listCard: [],
      listBill: [],
      tabLabel: '',
      activeName: 'first',
      total: 0,
      timerId: 0,
      selectGroups: [],
      formCardAdd: {
        id: '',
        real_name: '',
        telegram_group_id: ''
      },
      formCardAddRules: {
        id: [
          { required: true, message: 'ID不能为空', trigger: ['change', 'blur'] }
        ],
        real_name: [
          { required: true, message: '持卡人名不能为空', trigger: ['change', 'blur'] }
        ],
        telegram_group_id: [
          { required: true, message: '电报群不能为空', trigger: ['change', 'blur'] }
        ]
      },
      formGroupAdd: {
        id: '',
        name: '',
        comment: ''
      },
      formGroupAddRules: {
        id: [
          { required: true, message: 'ID不能为空', trigger: ['change', 'blur'] }
        ],
        name: [
          { required: true, message: '群名不能为空', trigger: ['change', 'blur'] }
        ],
        comment: [
          { required: true, message: '描述不能为空', trigger: ['change', 'blur'] }
        ]
      },
      groupList: []
    }
  },
  created() {
    //  从商店页面跳转过来的
    this.listQuery = { ...this.listQuery, store_id: this.$route.query.store_id }
    this.fetchGroupList()
    this.getBillList()
  },
  mounted() {
    this.timerId = window.setInterval(this.intervalMethod, 2000)
  },
  beforeDestroy() {
    window.clearInterval(this.timerId)
  },
  methods: {
    intervalMethod() {
      if (this.tabLabel === '银行卡管理') {
        getOnlineCard().then(response => {
          const list = [...this.listCard]
          // 在线设备全部设为离线
          list.forEach(item => {
            if (item.status === 2) {
              item.status = 1
            }
          })
          // 将服务器的状态更新到本地数据
          response.data.forEach(element => {
            list.forEach(cardItem => {
              if (element === cardItem.real_name) {
                cardItem.status = 2
              }
            })
          })
          this.listCard = list
        })
      }
    },
    handleClick(tab, event) {
      this.tabLabel = tab.label
      if (tab.label === '电报群管理') {
        this.fetchGroupList()
      } else if (tab.label === '银行卡管理') {
        this.getSelectedRoles()
        this.getCardList()
      } else {
        this.getBillList()
      }
    },
    getBillList() {
      this.listBillLoading = true
      listBill().then(response => {
        this.listBill = response.data
        this.listBillLoading = false
      })
    },
    getSelectedRoles() {
      listGroup().then(response => { this.selectGroups = response.data })
    },
    getCardList() {
      this.listCardLoading = true
      listCard().then(response => {
        this.listCard = response.data
        this.listCardLoading = false
        this.intervalMethod()
      })
    },
    submitCardFormAdd() {
      this.$refs['formCardAdd'].validate((valid) => {
        if (valid) {
          addCard(this.formCardAdd).then(response => {
            Message.success(response.data)
            this.dialogCardAddVisible = false
            this.getCardList()
          })
        }
      })
    },
    unbindCard(row) {
      unbindCard(row.id).then(response => {
        Message.success(response.data)
        this.getCardList()
      })
    },
    disableCard(row) {
      disableCard(row.id).then(response => {
        Message.success(response.data)
        this.getCardList()
      })
    },
    handleDialogCardAddClose() {
      this.$refs['formCardAdd'].resetFields()
    },
    fetchGroupList() {
      this.listGroupLoading = true
      listGroup().then(response => {
        this.groupList = response.data
        this.total = response.data.length
        this.listGroupLoading = false
      })
    },
    submitGroupFormAdd() {
      this.$refs['formGroupAdd'].validate((valid) => {
        if (valid) {
          addGroup(this.formGroupAdd).then(response => {
            Message.success(response.data)
            this.dialogGroupAddVisible = false
            this.fetchGroupList()
          })
        }
      })
    },
    handleDialogGroupAddClose() {
      this.$refs['formGroupAdd'].resetFields()
    },
    confirmGroupDelete(row) {
      this.$confirm(`确定永久删除该群?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(row.id).then(response => {
          this.fetchGroupList()
          Message.success(response.data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
